<template>
  <div>
    管理首页
    学生管理>查询学生 /student/
    {{user_info.username}}{{user_info.phone}}
    <div style="width:300px;">
      <ul>
        <li
          v-for="item1 in menus_data"
          :key="item1.id"
        >{{item1.label}}
          <ul>
            <li
              v-for="item2 in item1.children"
              :key='item2.id'
            ><a :href="item2.url">{{item2.label}}</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- <el-row class="tac">
      <el-col :span="12">
        <el-menu class="el-menu-vertical-demo">
          <el-submenu
            v-for="item1 in menus_data"
            :key="item1.id"
            :index="item1.id.toString()"
          >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item1.label}}</span>
            </template>

            <el-menu-item
              v-for="item2 in item1.children"
              :key="item2.id"
              :index="item1.id+'-'+item2.id"
            >
              <a :href="item2.url">{{item2.label}}</a>
            </el-menu-item>

          </el-submenu>
        </el-menu>
      </el-col>
    </el-row> -->

  </div>
</template>

<script>
import Axios from 'axios'
import Template from '../workflow/Template.vue'

export default {
  components: { Template },
  data() {
    return {
      token: localStorage.token || '',
      uid: localStorage.uid || '',
      user_info: {
        date_joined: "2020-12-23T02:43:41Z",
        email: "",
        first_name: "",
        groups: [],
        id: 2,
        img: "http://127.0.0.1:8000/media/user/0.jpg",
        is_active: true,
        is_staff: true,
        is_superuser: false,
        last_login: "2020-12-23T06:10:30.188010Z",
        last_name: "",
        password: "pbkdf2_sha256$150000$wAlUppfcPDoz$EuRxQGCQuFVdtNZZq20YqY7/RfYc0SX8piehGhieWdA=",
        phone: "13312341234",
        role: 1,
        user_permissions: [],
        username: "zhangsan"
      },
      menus_data: []
    }
  },
  created() {
    this.get_user_info()

  },
  methods: {
    get_user_info() {
      Axios.get('user/' + this.uid + '/', {
        headers: {
          Authorization: 'JWT ' + this.token
        }
      }).then((resp) => {
        console.log(resp.data)
        this.user_info = resp.data
        this.parse_menus()
      })
    },
    parse_menus() {
      var menus = this.user_info.role.menus
      // var menus = [
      //   {
      //     "id": 1,
      //     "label": "学生管理",
      //     "url": null,
      //     "parent": null
      //   },
      //   {
      //     "id": 3,
      //     "label": "查询学生",
      //     "url": "/student/edit/",
      //     "parent": 1
      //   }
      // ]
      var menus_data = []
      for (var i in menus) {
        if (menus[i].parent) {
          var the_parent = menus_data.find(item => item.id == menus[i].parent)
          if (the_parent.children) { } else {
            the_parent.children = []
          }
          the_parent.children.push(menus[i])
        } else {
          menus_data.push(menus[i])
        }
      }
      this.menus_data = menus_data
      console.log(this.menus_data)
      // {
      //   id: 1,
      //   label: "学生管理",
      //   parent: null,
      //   url: null,
      //   children: [
      //     {
      //       id: 3,
      //       label: "查询学生",
      //       parent: 1,
      //       url: "/student/edit/"
      //     }
      //   ]
      // }



    }
  }
}
</script>

<style>
</style>